<template>
    <div class = "home">
        <div class = "search" @click = "toSearchDetail">
            <span class = "iconfont icon-sousuo1x"></span>
            <span>搜索作家名/课程名</span>
        </div>
        <swiper
        class = "carousel" 
        indicator-dots 
        indicator-active-color = "rgb(255,255,255)"
        autoplay 
        circular
        >
            <swiper-item v-for = "v in 5" :key = "v">
                {{v}}
            </swiper-item>
        </swiper>
         <scroll-view
            class = "category"
            scroll-x
            enable-flex
          >
          <div class = "category-item" @click = "toList('BroadcastList')">
              <p>
                  <img src="http://192.168.31.134:8000/images/category_1.png" alt="">  
              </p>
              <p>直播课</p>
          </div>
          <div class = "category-item" @click = "toList('WriteWork')">
              <p>
                  <img src="http://192.168.31.134:8000/images/category_2.png" alt="">  
              </p>
              <p>写作业</p>
          </div>
          <div class = "category-item" @click = "toList('Composition')">
              <p>
                  <img src="http://192.168.31.134:8000/images/category_1.png" alt="">  
              </p>
              <p>作文课</p>
          </div>
          <div class = "category-item" @click = "toList('HeartCourse')">
              <p>
                  <img src="http://192.168.31.134:8000/images/category_2.png" alt="">  
              </p>
              <p>心理课</p>
          </div>
          <div class = "category-item" @click = "toList('BeautifulCourse')">
              <p>
                  <img src="http://192.168.31.134:8000/images/category_1.png" alt="">  
              </p>
              <p>美文课</p>
          </div>
        </scroll-view>
        <div class = "banner"></div>
        <div class = "broadcast">
            <TopTitle title = "直播课" url = "/pages/BroadcastList/main"/>
            <div class = "broadcast-icon">
                <img src="http://192.168.31.134:8000/images/broadcast_1.png" alt="">
            </div>
            <h5 class = "broadcast-title">课程标题课程标题课程标题课程标题课程标题课程标题课程标题</h5>
            <div class = "broadcast-control clearfix">
                <span class = "left">
                    <span class = "iconfont icon-zhibo"></span>时长: 15:30
                </span>
                <span class = "right">
                    2019-08-08
                </span>
            </div>
        </div>
        <div class = "delimiter"></div>
        <div class = "radio-station">
            <TopTitle title = "心理科" url = "/pages/HeartCourse/main" />
            <ul class = "item-container">
                <li class = "item-content">
                    <p>
                        <img src="http://192.168.31.134:8000/images/radio_station_1.png" alt="">
                    </p>
                    <h5 class = "text-ellipses">课程标题课程标题课程标题课程标题课程标题</h5>
                </li>
                <li class = "item-content">
                    <p>
                        <img src="http://192.168.31.134:8000/images/radio_station_1.png" alt="">
                    </p>
                    <h5 class = "text-ellipses">课程标题课程标题课程标题课程标题课程标题</h5>
                </li>
                <li class = "item-content">
                    <p>
                        <img src="http://192.168.31.134:8000/images/radio_station_1.png" alt="">
                    </p>
                    <h5 class = "text-ellipses">课程标题课程标题课程标题课程标题课程标题</h5>
                </li>
                <li class = "item-content">
                    <p>
                        <img src="http://192.168.31.134:8000/images/radio_station_1.png" alt="">
                    </p>
                    <h5 class = "text-ellipses">课程标题课程标题课程标题课程标题课程标题</h5>
                </li>
            </ul>
        </div>
        <div class = "delimiter"></div>
        <!-- 读书课 -->
        <div class ="reading">
            <TopTitle title = "读书课" url = "/pages/ReadBookList/main" />
            <ul class = "container">
                <li class = "item" v-for = "v in 2" :key = "v">
                    <div class = "item-icon">
                        <img src="http://192.168.31.134:8000/images/reading_1.png" alt="">
                    </div>
                    <div class = "item-content">
                        <h5 class ="text-ellipses">课程标题课程标题课程标题课程标题课程标题</h5>
                        <p class = "clearfix">
                            <span class = "left">
                                作者: 未知
                            </span>
                            <span class = "right">2019-08-08</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class = "delimiter"></div>
        <!-- 文摘电台 -->
        <div class ="reading">
            <TopTitle title = "文摘电台" url = "/pages/RadioStation/main" />
            <ul class = "container">
                <li class = "item">
                    <div class = "item-icon">
                        <img src="http://192.168.31.134:8000/images/reading_1.png" alt="">
                    </div>
                    <div class = "item-content">
                        <h5 class ="text-ellipses">课程标题课程标题课程标题课程标题课程标题</h5>
                        <p class = "clearfix">
                            <span class = "left">
                                <span class = "iconfont icon-maikefeng"></span>时长15:30
                            </span>
                            <span class = "right">888人已听</span>
                        </p>
                    </div>
                </li>
                <li class = "item">
                    <div class = "item-icon">
                        <img src="http://192.168.31.134:8000/images/reading_1.png" alt="">
                    </div>
                    <div class = "item-content">
                        <h5 class ="text-ellipses">课程标题课程标题课程标题课程标题课程标题</h5>
                        <p class = "clearfix">
                            <span class = "left">
                                <span class = "iconfont icon-maikefeng"></span>时长15:30
                            </span>
                            <span class = "right">888人已听</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
//组件引入区
import TopTitle from "./components/TopTitle"

export default {
    data(){
        return {

        }
    },
    onReady(){
    },
    components: {
        TopTitle
    },
    methods: {
        toSearchDetail(){
            wx.navigateTo({ url: '/pages/SearchDetail/main' });
        },
        toList(key){
            wx.navigateTo({ url: '/pages/' + key + '/main' });
        }
    }
}
</script>
<style lang = "scss" scoped>
    @import "index.scss";
</style>
